<template>
  <div class="main-box">
    <div class="select-box">
      <div style="margin-bottom: 10px;">
        <el-input class="select-input" placeholder="可输入名称或者其他关键字搜索..." v-model="formData.keyword">
          <template #prefix>
            <el-icon class="el-input__icon" size="18">
              <search/>
            </el-icon>
          </template>
        </el-input>
      </div>

      <!--筛选条件-->
      <div class="form-box" :class="{'form-box-all': isShow}">
        <el-form :model="formData" :label-width="80">
          <el-form-item>
            <template #label>
              <div style="display: flex;align-items: center">
                <span>类目</span>
                <el-tooltip
                    effect="dark"
                    content="根据产品类目快速查找擅长拍摄的模特"
                    placement="top"
                >
                  <el-icon :size="12">
                    <QuestionFilled/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-checkbox-group v-model="formData.cat_id" fill="#5695c0">
              <el-checkbox-button class="el-checkbox-button--default" v-for="item in catList" :key="'cat_'+item.id"
                                  :value="item.id">
                {{ item.name }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group fill="#5695c0" v-model="formData.sex">
              <el-radio-button class="el-radio-button--default" border :value="1">男</el-radio-button>
              <el-radio-button class="el-radio-button--default" border :value="2">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发布平台">
            <el-radio-group fill="#5695c0" v-model="formData.platform_id">
              <template v-for="item in platformList" :key="'platform_'+item.id">
                <el-radio-button class="el-radio-button--default" border :value="item.id">
                  {{ item.name}}
                </el-radio-button>
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="国家">
            <el-radio-group fill="#5695c0" v-model="formData.country_id">
              <template v-for="item in countryList" :key="'country_'+item.id">
                <el-radio-button class="el-radio-button--default" border :value="item.id">{{
                    item.name
                  }}
                </el-radio-button>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="form-right">
          <el-button class="el-button--default">重置</el-button>
          <div class="set-height-box" @click="isShow = !isShow">
            <span>展开筛选</span>
            <div :class="{'set-height-up': isShow}">
              <el-icon>
                <ArrowDown/>
              </el-icon>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="list-box">
      <div class="list-item" v-for="(item, index) in modelList" :key="index">
        <div class="item-box">
          <div class="image-box"></div>
          {{ item }}
        </div>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import Https from "@/server/index";
import {onMounted, reactive, ref} from "vue";

const formData = reactive({
  keyword: "",
  cat_id: [],
  sex: "",
  platform_id: "",
  country_id: "",
  pageNum: 1,
})
const isShow = ref(false);
const platformList = ref([]);
const countryList = ref([]);
const catList = ref([]);
const modelList = ref([]);

// const catList = reactive([
//   {name: "类目", list: [], value: "cat_id", type: "checkbox"},
//   {name: "模特性别", list: [{name: "男", value: "1"}, {name: "女", value: "2"}], value: "sex", type: "radio"},
//   {name: "发布平台", list: [{name: "TikTok", value: "1"}], value: "platform_id", type: "radio"},
//   {name: "发布国家", list: [{name: "美国"}], value: "country_id", type: "radio"},
// ])

// const setSelect = (key: string, index: number, item: object) => {
//   console.log(key, index, item)
// }

const getTopList = () => {
  Https.getCatList({}).then((res: any) => {
    if (res.code === 0) {
      catList.value = res.data.list;
    }
  })

  Https.getPlatformList({}).then((res: any) => {
    if (res.code === 0) {
      // console.log(res);
      platformList.value = res.data.list;
    }
  })

  Https.getCountryList({}).then((res: any) => {
    if (res.code === 0) {
      // console.log(res);
      countryList.value = res.data.list;
    }
  })

  let data = {
    keyword: formData.keyword,
    cat_id: formData.cat_id.join(","),
    sex: formData.sex,
    platform_id: formData.platform_id,
    country_id: formData.country_id,
    pageNum: 1,
  };
  Https.getModelList(data).then((res: any) => {
    if (res.code === 0) {
      modelList.value = res.data.list;
    }
  })

}

onMounted(() => {
  getTopList()
})

</script>

<style scoped lang="scss">
.el-checkbox-button--default, .el-radio-button--default {
  margin: 0 10px 10px 0;
}

.form-box {
  height: 94px;
  overflow: hidden;
  display: flex;
  position: relative;
  justify-content: space-between;
  transition: height .2s;

  .form-right {
    position: absolute;
    width: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 20px;
    bottom: 20px;

    .set-height-box {
      margin-left: 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;

      span {
        padding-right: 4px;
      }

      div{
        transform-origin: center;
        transition: all .1s;
        display: flex;
        align-items: center;
      }

    }

    .set-height-up{

      transform: rotate(180deg);
    }
  }
}

.form-box-all{
  height: 184px !important;
}

.select-input {
  width: 400px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #ccdfff;
  margin-bottom: 10px;
}

.top-list-box {
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 52px;
  font-size: 14px;

  .name-box {
    color: #9ba6ba;
    width: 64px;
    margin-right: 14px;
    text-align: right;
  }
}

.list-box {
  padding: 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  width: 20%;
  padding: 0 16px;
  margin-bottom: 30px;

  .item-box {
    width: 100%;
    position: relative;
    aspect-ratio: 3 / 4;
    object-fit: cover;

  }
}

</style>